<template>
	<view class="background">
		
		<image src="../../static/login/picture.png" class="picture"></image>
		
		<view class="body">
			
			<view style="position: relative; top: 50rpx;left: 50rpx;" @click="backto_my">
				返回
			</view>
			<view class="head">
				
				<view @click="login" :class="a?'login':'login-out'" >
					登陆
				</view>
				<view class="divide">
					/
				</view>
				<view @click="register" :class="a?'register':'register-on'" >
					注册
				</view>

				<view class="warm">
					欢迎来到天下无诈，请使用手机号登陆
				</view>
			</view>


			<view class="loginin" v-show="a">
				<view class="input-all1">
					<input type="text" placeholder="输入账户号码" class="input" @input="onInput1">
					<input type="text" placeholder="输入账户密码" class="input" @input="onInput2">
				</view>
				<view :class="f?'define1':'define'" @click="to_my">
					确定
				</view>
				<view class="forget" >
					忘记密码?
				</view>
			</view>
			<view class="registerin" v-show="b">
				<view class="input-all2">
					<input type="text" placeholder="设置用户名" class="input" @input="onInput3">
					<input type="text" placeholder="设置密码" class="input"
@input="onInput4">
					<input type="text" placeholder="确认密码" class="input"
@input="onInput5">
				</view>
				<view :class="j?'register-c':'register-b'" @click="to_my">
					注册
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: true,
				b: false,
				c: false,
				d: false,
				e: false,
				f: false,
				g: false,
				h: false,
				i: false,
				j: false,
			}
		},

		methods: {
			backto_my(){
					uni.switchTab({
					url:"./my"
				})
			},
			to_my(){
				if(this.f||this.j==true){
					uni.switchTab({
					url:"./my"
				})
				}
			},
			login: function() {
				this.a = true;
				this.b = false;
			},
			register: function() {
				this.b = true;
				this.a = false;
			},
			
			onInput1(e1) {
				if (e1.detail.value.length>0) {
					this.c = true;
					this.compare1();
					console.log(e1.detail)
				} else {
					this.c = false;
					this.f=false;
					this.compare1();
					console.log(e1.detail)
					
				}
			},
			
			onInput2(e2) {
				if (e2.detail.value.length>0) {
					this.d = true;
					this.compare1();
					console.log(e2.detail.value)
				} else {
					this.d = false;
					this.compare1();
					this.f=false;
					console.log(e2.detail)
				}
			},
			compare1() {
				if (this.c == true && this.d== true) {
					this.f = true
				}
			},
			
			onInput3(e3) {
				if (e3.detail.value.length>0) {
					this.g = true;
					this.compare2();
					console.log(e3.detail.value)
				} else {
					this.g = false;
					this.j=false;
					this.compare2();
					console.log(e3.detail.value)
				}
			},
			
			onInput4(e4) {
				if (e4.detail.value.length>0) {
					this.h = true;
					this.compare2();
					console.log(e4.detail.value)
				} else {
					this.h = false;
					this.compare2();
					this.j=false;
					console.log(e4.detail)
				}
			},onInput5(e5) {
				if (e5.detail.value.length>0) {
					this.i = true;
					this.compare2();
					console.log(e5.detail.value)
				} else {
					this.i = false;
					this.compare2();
					this.j=false;
					console.log(e5.detail)
				}
			},
			compare2() {
				if (this.g == true && this.h== true&& this.i== true) {
					this.j = true
				}
			}
		}
	}
</script>

<style>
	.background {
		background-image: url("@/static/login/background.png");
		background-size: 120%;
		background-repeat: no-repeat;
		height: 1585rpx;
		position: relative;
	}

	.body {
		margin: auto;
		width: 700rpx;
		height: 1100rpx;
		background-color: aliceblue;
		border-radius: 20rpx;
		position: absolute;
		top: 320rpx;
		left: 0;
		right: 0;
	}

	.picture {
		z-index: 1;
		margin: auto;
		width: 247rpx;
		height: 297rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 160rpx;
	}

	.head {
		margin-left: 30rpx;
		padding-top: 10rpx;
		margin-top: 170rpx;
		width: 500rpx;

	}

	.login-out {
		margin-top: 6rpx;
		width: 100rpx;
		height: 70rpx;
		font-size: 45rpx;
		float: left;
		text-align: center;

	}

	.login {
		width: 100rpx;
		height: 70rpx;
		font-size: 50rpx;
		font-weight: 700;
		float: left;
		text-align: center;
	}

	.divide {
		width: 30rpx;
		height: 70rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		font-size: 50rpx;
		float: left;
		text-align: center;
	}

	.register {
		margin-top: 6rpx;
		width: 100rpx;
		height: 70rpx;
		font-size: 45rpx;
		float: left;
		text-align: center;
	}

	.register-on {
		width: 100rpx;
		height: 70rpx;
		font-size: 50rpx;
		font-weight: 700;
		float: left;
		text-align: center;
	}

	.warm {
		width: 500rpx;
		height: 70rpx;
		font-size: 25rpx;
		font-weight: 500;
		margin-top: 80rpx;
	}

	.input-all1 {
		margin-top: 150rpx;
	}

	.input-all2 {
		margin-top: 150rpx;
	}

	.input {
		padding-left: 20rpx;

		margin-left: 20rpx;
		margin-top: 50rpx;
		width: 600rpx;
		padding-bottom: 30rpx;
		border-bottom: #cccccc solid 1rpx;
	}

	.define {
		margin: auto;
		padding-top: 10rpx;
		text-align: center;
		margin-top: 130rpx;
		width: 500rpx;
		height: 60rpx;
		border-radius: 50rpx;
		font-size: 110%;
		font-weight: 700;
		background-color: #eeeeee;
		color: #b9b9b9;
	}

	.define1 {
		margin: auto;
		padding-top: 10rpx;
		text-align: center;
		margin-top: 130rpx;
		width: 500rpx;
		height: 60rpx;
		border-radius: 50rpx;
		font-size: 110%;
		font-weight: 700;
		background-color: #55aa7f;
		color: #ffffff;
	}

	.forget {
		margin-top: 50rpx;
		text-align: center;
		font-size: 80%;
		color: #6ba97f;
	}

	.register-b {
		margin: auto;
		padding-top: 10rpx;
		text-align: center;
		margin-top: 100rpx;
		width: 500rpx;
		height: 60rpx;
		border-radius: 50rpx;
		font-size: 110%;
		font-weight: 700;
		background-color: #eeeeee;
		color: #b9b9b9;
	}
	.register-c {
		margin: auto;
		padding-top: 10rpx;
		text-align: center;
		margin-top: 100rpx;
		width: 500rpx;
		height: 60rpx;
		border-radius: 50rpx;
		font-size: 110%;
		font-weight: 700;
		background-color: #55aa7f;
		color: #eeeeee;
	}


</style>
